<template>
	<view class="order-list-wrap full box relative bg-primary flex column" :style="{'--height':statusBarHeight_}">
		<!-- <view class="navbar"></view> -->
		<view class="tab-wrap" id="tabWrap">
			<view class="tab-item" v-for="(item,index) in tabList" :key="index" :class="{active: activeTab === index}"
				@click="changeTab(index)">
				<text>{{ item.label }}</text>
			</view>
			<view class="tab-slide" :style="{'--left':tabRect[activeTab]}"></view>
		</view>
		<view class="relative flex-1 box w-100 page-inner">
			<view class="absolute inset" id="pageWrap">
				<mescroll-uni :down="{auto:false}" :up="{use:false}" :fixed="false" @init="mescrollInit"
					@down="downCallback" @up="upCallback">
					<view class="mescroll-page-wrapper box relative" :style="{'--content-height':height}">
						<swiper class="full" :current="activeTab" @change="swiperChange">
							<swiper-item class="full" v-for="(item,index) in tabList" :key="index">
								<list-vue :ref="`list_${index}`" :auto="index===0" :type="item.value" />
							</swiper-item>
						</swiper>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import ListVue from './com/list.vue'
	// 订单状态1代付款2待出行3待评论4退款5订单取消6已完成
	export default {
		components: { ListVue },
		onLoad(ev) {
			uni.$on('updateOrder', this.updateOrder)
			if (!ev.hasOwnProperty('active')) return
			const { active } = ev
			this.activeTab = active * 1
			setTimeout(() => {
				this.triggerUpdate(this.activeTab, )
			})
		},
		onUnload() {
			uni.$off('updateOrder', this.updateOrder)
		},
		onReady() {
			this.initRect()
		},
		methods: {
			updateOrder() {
				this.mescroll.triggerDownScroll()
			},
			downCallback() {
				this.triggerUpdate(this.activeTab, v => {
					this.mescroll.endSuccess(v)
				})
			},
			triggerUpdate(index, cb) {
				let refTarget = null
				const refList = this.$refs[`list_${index}`]
				if (Array.isArray(refList)) {
					refTarget = refList[0]
				}
				if (!refTarget) return
				if (!cb && refTarget.hasInit) return
				refTarget.initData(true, cb)
			},
			swiperChange(ev) {
				const { current } = ev.detail
				this.activeTab = current
				this.triggerUpdate(current)
			},
			changeTab(v) {
				if (this.activeTab !== v) {
					this.activeTab = v
				}
			},
			initRect() {
				let selector = uni.createSelectorQuery().in(this)
				selector.selectAll('#tabWrap .tab-item').boundingClientRect()
				selector.select('#tabWrap .tab-slide').boundingClientRect()
				selector.select('#pageWrap').boundingClientRect()
				selector.exec(rect => {
					const [lists, slide, pageInner] = rect
					const { width: slideWidth } = slide
					const { height } = pageInner
					this.height = height
					const result = lists.map(item => {
						return item.left + (item.width / 2) - (slideWidth / 2)
					})
					this.tabRect = result
				})
			},
		},
		computed: {
			tabList() {
				return [{
						label: '待付款',
						value: 1,
					}, {
						label: '待出行',
						value: 2
					},
					{
						label: '退款',
						value: 4,
					},
					{
						label: '已取消',
						value: 5
					}, {
						label: '已完成',
						value: 6
					},
					// {
					// 	label: '待评价',
					// 	value: 3
					// }
				]
			}
		},
		data() {
			return {
				activeTab: 0,
				tabRect: [0, 0, 0, 0],
				height: 600,
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-list-wrap {
		box-sizing: border-box;

		.mescroll-page-wrapper {
			height: calc(1px * var(--content-height));
			padding: 0 32rpx;
			box-sizing: border-box;
		}

		.page-inner {
			margin-top: 30rpx;
		}

		.tab-wrap {
			display: flex;
			align-items: center;
			height: 96rpx;
			position: relative;
			padding: 0 32rpx;
			box-sizing: border-box;
			justify-content: space-between;
			background-color: #FFF;
			border-bottom: 1px solid #E7E7E7;

			.tab-slide {
				width: 112rpx;
				height: 4rpx;
				background: #000000;
				position: absolute;
				bottom: 0;
				left: calc(1px * var(--left));
				transition: left cubic-bezier(0.165, 0.84, 0.44, 1) .2s;
			}

			.tab-item {
				height: 44rpx;
				font-size: 28rpx;
				color: rgba(0, 0, 0, 0.4);
				line-height: 44rpx;
				width: 112rpx;
				text-align: center;


				&.active {
					font-weight: bold;
					color: #000000;
				}
			}
		}

		.navbar {
			height: var(--height);
			width: 100%;
			background: #FFFFFF;
		}
	}
</style>